<html>    
  <head> 
    <script type="text/javascript" src="../jquery/jquery-1.4.4.min.js"></script>        
    <script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
    <script type="text/javascript" src="../gmap3-2.0-min.js"></script> 
    <style>
      .gmap3{
        margin: 20px auto;
        border: 1px dashed #C0C0C0;
        width: 500px;
        height: 250px;
      }
      #panTo{
        text-align:center;
      }
    </style>

    <script type="text/javascript">
      $(function(){
      
        $('#test1').gmap3(
          { action: ':init',
            args:{
                center:{
                    lat:44.797916, 
                    lng:-93.278046
                },
                onces: {
                  bounds_changed: function(){
                    $('#test1').gmap3({action:'getBounds', callback:getBounds});
                  }
                }
            }
          }
        );
        
        var markers=[];
        function getBounds($e, bounds){
          if (!bounds) return;
        	var southWest = bounds.getSouthWest();
        	var northEast = bounds.getNorthEast();
        	var lngSpan = northEast.lng() - southWest.lng();
        	var latSpan = northEast.lat() - southWest.lat();
        	for (var i = 0; i < 10; i++) {
            $e.gmap3({
              action : ':addMarker',
              lat: southWest.lat() + latSpan * Math.random(),
              lng: southWest.lng() + lngSpan * Math.random(),
              callback: function($e, marker){
                var i = markers.length
                markers[i] = marker;
                var $button = $('<span id="button-'+i+'"> ['+i+'] </span>');
                $button
                  .click(function(){
                      var i = $(this).attr('id').substr(7);
                      $e.gmap3({
                        action:'panTo', 
                        args:[
                          markers[i].position
                        ]
                      });
                  })
                  .css('cursor','pointer');
                $('#panTo').append($button);
              }
            });
          }
        }
        
      });         
    </script>
  </head>
  <body>
    <div id="panTo"></div>
    <div id="test1" class="gmap3"></div>
  </body>
</html>